/* updated 2022/03/10 */
:root {
  --color-primary: #2d6bf0;
  --color-primary-rgb: rgb(45, 107, 240);
  --color-primary-dark: #275dd1;
  --color-primary-dark1: #2351b5;
  --color-primary-light: #447aee;
  --color-primary-light1: #6a95f4;
  --color-primary-light2: #85a9f6;
  --color-green: #06c056;
  --color-green-light: #f0fdfa;
  --color-blue: #4e73be;
  --color-blue-light: #e9f2ff;
  --color-red: #f25f5f;
  --color-red-light: #fcd8d8;
  --color-yellow: #fbb128;
  --color-yellow-light: #fef7e7;
  --color-gray: #abaeb5;
  --color-gray-light: #f5f8f8;

  --color-divider: #dcdfe6;
  --color-divider-light: #eff0f3;

  --color-border: #dcdfe6;
  --color-border-light: #e4e7ed;
  --color-border-lighter: #ebeef5;
  --color-border-xlighter: #f2f6fc;

  --color-shadow: rgba(223, 228, 236, 0.438);
  --color-shadow-light: rgba(223, 232, 236, 0.25);

  --color-background: var(--color-gray-light);
  --color-background-blue: #f2f4f9;

  --color-text-primary: #323232;
  --color-text-regular: #606266;
  --color-text-secondary: #909399;
  --color-text-placeholder: #c3c5cb;
  --color-text-orange: #f17020;
  --color-text-blue: #2a5be2;

  --color-fill: #eef2f9;
  --color-fill-dark: #ebedf0;
  --color-fill-light: #f5f7fa;
  --color-fill-blue: #edf5fe;

  --size-text-xsmall: 10px;
  --size-text-small: 12px;
  --size-text-regular: 14px;
  --size-text-large: 16px;
  --size-text-xlarge: 18px;
  --size-text-xxlarge: 20px;
  --size-text-xxxlarge: 24px;

  --size-line-height-small: 16px;
  --size-line-height-regular: 20px;
  --size-line-height-large: 24px;
  --size-line-height-xlarge: 30px;
  --size-line-height-xxlarge: 32px;

  --size-border-radius-regular: 6px;
  --size-border-radius-small: 3px;

  --box-shadow: 0px 2px 4px 0px var(--color-shadow);
  --box-shadow-light: 0px 2px 4px 0px var(--color-shadow-light);
}

* {
  border: 0px;
  padding: 0px;
  margin: 0px;
}

/**
*基本标签，初始化
*/
body,
html {
  margin: auto;
  padding: 0;
  margin: auto;
  color: var(--color-text-primary);
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5fae\8f6f\96c5\9ed1',
    Arial, sans-serif;
  font-size: var(--size-text-regular);
  line-height: var(--size-line-height-regular);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  cursor: inherit;
}

h1,
h2,
h3,
h4,
h5,
mark {
  font-weight: normal;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
}

input,
textarea,
select {
  background: none;
  border: none;
  outline: none;
  user-select: auto;
  appearance: none;
}

em,
i {
  font-style: normal;
}

img,
object {
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
}

a,
a:link {
  text-decoration: none;
}

ul,
li {
  list-style-type: none;
}

/**
* 实用类
*/
.text-xheadline {
  color: var(--color-text-primary);
  font-size: var(--size-text-xxlarge);
  font-weight: 500;
  line-height: 1em;
}

.text-headline {
  color: var(--color-text-primary);
  font-size: var(--size-text-xlarge);
  font-weight: 500;
  line-height: var(--size-line-height-xlarge);
}

.text-xxheadline {
  color: var(--color-text-primary);
  font-size: var(--size-text-xxlarge);
  font-weight: bold;
  line-height: 1.1em;
}

.text-title {
  color: var(--color-text-primary);
  font-size: var(--size-text-large);
  line-height: var(--size-line-height-large);
  font-weight: 500;
}

.text-subtitle {
  color: var(--color-text-regular);
  font-size: var(--size-text-regular);
  font-weight: normal;
}

.text-placeholder {
  color: var(--color-text-placeholder);
}

.text-large {
  color: var(--color-text-primary);
  font-size: var(--size-text-large);
  line-height: var(--size-line-height-large);
}
.color-red {
  color: var(--color-red);
}
.color-gray {
  color: var(--color-gray);
}
.color-green {
  color: var(--color-green);
}
.color-text-secondary {
  color: var(--color-text-secondary);
}
.color-text-placeholder {
  color: var(--color-text-placeholder);
}

.text-weak {
  color: var(--color-text-placeholder);
  font-size: var(--size-text-small);
  font-weight: normal;
}

.text-xweak {
  color: var(--color-text-placeholder);
  font-size: var(--size-text-xsmall);
  font-weight: normal;
}

.text-normal {
  color: var(--color-text-primary);
  font-size: var(--size-text-regular);
  font-weight: normal;
}

.text-emphasis {
  color: var(--color-primary);
  font-weight: bold;
}

.text-color-primary {
  color: var(--color-primary);
}

.text-color-emphasis {
  color: var(--color-primary);
}

.text-color-secondary {
  color: var(--color-text-secondary);
}

.text-color-placeholder {
  color: var(--color-text-placeholder);
}

.text-color-green {
  color: var(--color-green);
}

.text-color-yellow {
  color: var(--color-yellow);
}

.text-color-red {
  color: var(--color-red);
}

.bold {
  font-weight: bold;
}

.link {
  color: var(--color-primary);
  font-size: var(--size-text-regular);
  padding: 0 4px;
  cursor: pointer;
}

button,
.clickable {
  background: transparent;
  transition-property: color, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 0.05s;
  cursor: pointer;
  outline: none;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input::placeholder {
  color: var(--color-text-placeholder) !important;
}

.blur {
  -webkit-filter: blur(10px);
  /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.margin-top-8 {
  margin-top: 8px;
}
